<script setup lang='ts'>
import { useAddOrEditSupplierRate } from '@fl/api/supplier'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { cloneDeep } from 'lodash-es'

import CalculationFormula from './calculation-formula.vue'
import calculationRules from './calculation-rules.vue'
import groupPricePreview from './group-price-preview.vue'
import preparationDescription from './preparation-description.vue'
import richText from './rich-text.vue'

const isAfterEnding = inject('isAfterEnding')

const { isPending, mutate } = useAddOrEditSupplierRate()

const visible = defineModel<boolean>('visible', { required: true })

const id = defineModel<any>('id')

const projectId = defineModel<any>('projectId')

const categoryId = defineModel<any>('categoryId')

const childRef = ref()

const componentRef = defineModel<any>('componentRef')

const componentName = computed(() => {
    switch (componentRef.value?.title) {
        case '项目建造汇总':
            return groupPricePreview

        case '编制说明':
        case '计算规则':
            return richText

        case '计算公式':
            return CalculationFormula
        default:
            return ''
    }
})

const title = computed(() => componentRef.value?.title)

const isShowSave = computed(() => componentRef.value?.title === '项目建造汇总' && !unref(isAfterEnding))

function cancel() {
    visible.value = false
}

function reset() {
    componentRef.value = ''
}

function save() {
    const data = childRef.value?.gridOptionsData1
    const params = {
        biddingProjectId: unref(projectId),
        id: data?.[0]?.rateId,
        mgmtRate: data?.[0]?.mgmtRate,
        productId: unref(id),
        profit: data?.[0]?.profit,
        rate: data?.[0]?.rate,
    }
    console.log('🚀 ~ save ~ params:', params)
    mutate(params, {
        onSuccess: () => {
            ElMessage.success('操作成功')
            cancel()
        },
    })
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="1100"
                @cancel="cancel"
                @closed="reset"
    >
        <div h-600
             overflow-x-hidden
             overflow-y-auto
        >
            <component :is="componentName"
                       v-if="visible && title"
                       :id="id"
                       ref="childRef"
                       :project-id="projectId"
                       :category-id="categoryId"
                       :title="title"
            />
        </div>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn v-if="isShowSave"
                           type="primary"
                           :loading="isPending"
                           @click="save"
                >
                    保存
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
